<template>
  <view class="page">
    <!-- 标题栏  start-->
    <fu-custom bgColor="bg-fff" :isBack="true">
      <block slot="content">{{i18n['兑换记录']}}</block>
    </fu-custom>
    <!-- 标题栏  end -->
    <!-- 导航栏 start -->
    <view class="navbar solid-top" :style="{top: CustomBar+'px'}">
      <block v-for="(item, index) in navList" :key="index">
        <view class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
          {{ item.text }}
        </view>
      </block>
    </view>
    <!-- 导航栏 end -->
    <!-- 页面加载 start -->
    <fu-loading v-if="isShowLoading"></fu-loading>
    <!-- 页面加载 end -->
    <!-- 订单列表 start -->
    <view class="list" v-else>
      <block v-for="(item, index) in lists" :key="index">
        <view class="order-item" @click.stop="navToOrderDetail(item)">
          <view class="i-top b-b">
            <text class="time">
              <text>{{i18n['订单编号']}}: {{ item.order_sn }} </text>
            </text>
            <text class="state">{{ item.status | filterStatus }}</text>
          </view>
          <view class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.goods" :key="goodsIndex">
			  <view class="goods-img radius overHidden">
				  <fu-image :src="goodsItem.goods_thumb" mode="aspectFill"></fu-image>
			  </view>
            <view class="right padding-lr">
              <view class="text-df text-333 text-cut-2">
                {{ goodsItem.goods_name }}
              </view>
              <view v-if="goodsIndex.sku_name" class="text-sm text-999 text-cut">
                {{ goodsIndex.sku_name }}
              </view>

               <!-- 针对积分的退款状态 -->
              <view class="right">
               	<view class="text-right" v-if="goodsItem.order_refund_status == -2"
               		style="color: rgb(247, 173, 50); font-size: 24rpx">{{i18n['售后取消']}}</view>
               	<view class="text-right" v-if="goodsItem.order_refund_status == -1"
               		style="color: rgb(247, 173, 50); font-size: 24rpx">{{i18n['申请驳回']}}</view>
               	<view class="text-right" v-if="goodsItem.order_refund_status == 0"
               		style="color: rgb(247, 173, 50); font-size: 24rpx">{{i18n['售后中']}}</view>
               	<view class="text-right" v-if="goodsItem.order_refund_status == 3"
               		style="color: rgb(247, 173, 50); font-size: 24rpx">{{i18n['退款成功']}}</view>
               	<view class="text-right" v-if="goodsItem.order_refund_status == 2"
               		style="color: rgb(247, 173, 50); font-size: 24rpx">{{i18n['商家确认收货']}}</view>
               	<view class="text-right" v-if="goodsItem.order_refund_status == 1"
               		style="color: rgb(247, 173, 50); font-size: 24rpx">{{i18n['同意申请']}}</view>
               	<view class="text-right" v-if="goodsItem.order_refund_status == -999"
               		style="color: rgb(247, 173, 50); font-size: 24rpx">{{i18n['申请售后']}}</view>
               </view>



              <view class="flex justify-between align-center">
                <text>
                  <text class="text-lg text-theme">{{ goodsItem.sales_integral || 0}}</text>
                  <text class=" text-theme font-24 " >{{i18n['积分']}}</text>
                  <text v-if="item.payable_money>0" class="text-theme" style="padding:0 10rpx;">+</text>
                  <text v-if="item.payable_money>0" class="text-lg text-theme text-price">
                    {{ goodsItem.shop_price }}
                  </text>

                </text>

                <text class="text-xs text-999">
                  x {{ goodsItem.num }}
                </text>
              </view>
            </view>
          </view>
          <view class="price-box">

            <view> </view>
            <view v-if='item.order_type !=7 || item.final_status ==1'>
              {{i18n['合计']}}：
              <text style="font-size:40rpx;">{{ item.sales_integral || 0}}</text>
              <text>{{i18n['积分']}}</text>
              <text v-if="item.payable_money>0" style="padding:0 10rpx;font-size:40rpx;">+</text>
              <text v-if="item.payable_money>0" class="price">{{ item.payable_money }}</text>
            </view>
          </view>
          <view class="action-box">
            <button class="action cu-btn round" v-if="
                item.status == -1 ||
                item.status == 4 ||
                item.status == 3 ||
                item.status == 7
              "
              @click.stop="delOrder(item.order_sn)">
              {{i18n['删除订单']}}
            </button>
            <button class="action cu-btn recom" v-if="item.status == 0" @tap.stop="cancelOrder(item.order_sn)">
              {{i18n['取消订单']}}
            </button>
            <button class="action cu-btn round bgclor" v-if="item.status == 3" @click.stop="evaluateOrder(item.order_sn,item.order_type,item.goods)">{{i18n['去评价']}}</button>
            <button v-if="item.is_remind.info == 0 && item.status == 1  && ( item.order_type != 7 || item.final_status ==1) "
              class="action cu-btn round bgclor" @click.stop="remindOrder(item.order_sn)">
              {{i18n['提醒发货']}}
            </button>
            <button v-if="item.is_remind.info == 1 && item.status == 1  && ( item.order_type != 7 || item.final_status ==1)"
              class="cu-btn round action have_click" disabled="false">
              {{i18n['已提醒']}}
            </button>
            <button class="action cu-btn round" v-if="item.status == 2" @click.stop="receiveOrder(item.order_sn)">
              {{i18n['确认收货']}}
            </button>
            <button class="action cu-btn round" v-if="item.status == 2" @click.stop="seelogs(item.order_sn)">
              {{i18n['查看物流']}}
            </button>
            <button  class="action cu-btn round" @click="navToOrderDetail(item)"  v-if="item.status == 6"  >
              {{i18n['查看详情']}}
            </button>
          </view>
        </view>
      </block>
       <!-- 空布局 start -->
    <fu-empty-ui v-if="lists.length == 0 && isInit"></fu-empty-ui>
    <!-- 空布局 end -->

    <!-- 底部数据加载状态  start-->
    <uni-load-more v-if="lists.length > 0" :status="status"></uni-load-more>
    <!-- 底部数据加载状态  end-->
    </view>
    <!-- 订单列表 end -->

    <!-- 网络监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络监测 end -->
  </view>
</template>

<script>
   let i18n = global.i18n;
  // 定义顶部导航
  const tabs = [{
      state: 0,
      text: i18n["全部"],
      type: "all",
    },
    {
      state: 2,
      text: i18n["待发货"],
      type: "unship",
    },
    {
      state: 3,
      text: i18n["待收货"],
      type: "unreceive",
    },
    {
      state: 4,
      text: i18n["已完成"],
      type: "finish",
    }
  ];
  export default {
    data() {
      return {
        isShowLoading: false, //是否显示页面初始化加载loading
        tabCurrentIndex: 0, //顶部导航 选择的第几个
        navList: [{
      state: 0,
      text: i18n["全部"],
      type: "all",
    },
    {
      state: 2,
      text: i18n["待发货"],
      type: "unship",
    },
    {
      state: 3,
      text: i18n["待收货"],
      type: "unreceive",
    },
    {
      state: 4,
      text: i18n["已完成"],
      type: "finish",
    }
  ], //冻结顶部导航
        lists: [], //订单列表
        page: 1, //页码说
        size: 10, //一页显示几条数据
        status: "more", //  加载状态  more:有更多数据  noMore:已加载全部数据  loading:数据加载中
        isInit: false, //是否已经初始化
        type: 'all', //请求的订单类别
      };
    },
    /**
     * @description 过滤显示 状态换文本内容
     * @param {val} val:状态码
     */
    filters: {
      filterStatus(val) {
        switch (val) {
          case 0:
            return global.i18n["待付款"];
          case 1:
            return global.i18n["已付款"]
          case 2:
            return global.i18n["已发货"];
          case 3:
            return global.i18n["已完成"];
          case 4:
            return global.i18n["已评价"];
          case 6:
            return global.i18n["售后中"];
          case 7:
            return global.i18n["售后已完成"];
          case -1:
            return global.i18n["已取消"];
          default:
            return "";
        }
      },
    },
    /**
     * @description 获取订单列表
     */
    onShow() {
      this.page = 1;
      this.status = "more";
      this.getOrderList();
    },
    onPullDownRefresh() {
      this.refreshOrderList();
    },
    onReachBottom() {
      this.getOrderList();
    },
    methods: {

      /**
       * @description   查看物流
       * @param {Object} orderSn：订单编号
       */
      seelogs(orderSn) {
        console.log('查看物流')
        this.$urouter.navigateTo({
          url: "/pages/order/orderdetail/express-delivery/index",
          params: {
            order_sn: orderSn,
          },
        });
      },
      /**
       *  @description 顶部tab点击
       * @param {Object} index 导航栏选择序号
       */
      tabClick(index) {
        this.tabCurrentIndex = index;
        this.type = this.navList[index].type;
        this.refreshOrderList(true);
      },
      /**
       * @description  获取列表
       * @param {Object} value  用来判断第页码初始化第一次 加载页面loading
       */
      getOrderList(value) {
        if (this.status != "more") return;
        this.status = "loading";
        let data = {
          order_type: 12, //代表请求的是兑换积分订单
          type: this.type,
          page: this.page,
          list_rows: this.size,
        };
        console.log('请求的数据', data)
        if (this.page == 1 && value) {
          this.isShowLoading = true
        }
        this.$api
          .post(global.apiUrls.getOrderList, data)
          .then((res) => {
            console.log("订单列表", res);
            this.isShowLoading = false
            if (res.data.code == 1) {
              var curPageData = res.data.data.list;
              if (this.page == 1) this.lists = [];
              this.lists = this.lists.concat(curPageData);
              if (curPageData.length >= this.size) {
                this.status = "more";
                this.page++;
              } else {
                this.status = "noMore";
              }
            } else {
              this.$message.info(res.data.msg);
            }
            this.isInit = true;
            uni.stopPullDownRefresh();
          })
          .catch((err) => {
            this.isShowLoading = false
            uni.stopPullDownRefresh();
          });
      },
      /**
       * @description  取消订单
       * @param {type} sn :订单sn编码
       */
      cancelOrder(sn) {
        this.$util.showModal({
          title: this.i18n["提示"],
          content: this.i18n["确定要取消订单吗?"],
          success: (res) => {
            if (res.confirm) {
              this.$api
                .post(global.apiUrls.postCancelOrder, {
                  order_sn: sn,
                  // return_id: reasonId
                })
                .then((res) => {
                  console.log("取消订单操作", res);
                  if (res.data.code == 1) {
                    this.$message.info(this.i18n["提交成功,正在为您取消订单"]);
                    setTimeout(() => {
                      this.refreshOrderList();
                    }, 800);
                  }
                })
                .catch((err) => {
                  console.log("err: " + JSON.stringify(err));
                });
            }
          },
        });
      },
      /**
       * @description 删除订单
       * @param {Object} sn :订单sn编码
       */
      delOrder(sn) {
        this.$util.showModal({
          title: this.i18n["确认删除此订单?"],
          content: this.i18n["删除后不可恢复"],
          success: (res) => {
            if (res.confirm) {
              this.$api.post(global.apiUrls.postDelOrder, {
                  order_sn: sn
                })
                .then(res => {
                  console.log("删除回调: ", res);
                  let data = res.data;
                  if (data.code == 1) {
                    this.$message.info(this.i18n["删除成功"]);
                    setTimeout(() => {
                      let _index = this.lists.findIndex(
                        (item) => item.order_sn == sn
                      );
                      this.lists.splice(_index, 1);
                    }, 600);
                  } else {
                    this.$message.info(data.msg);
                  }
                })
                .catch((err) => {
                  console.log("err: " + JSON.stringify(err));
                });
            }
          },
        });
      },

      /**
       * @description 提醒发货
       * @param {Object} sn:订单编号
       */
      remindOrder(sn) {
        this.$api
          .post(global.apiUrls.postRemindShipment, {
            order_sn: sn
          })
          .then((res) => {
            // console.log("res: " + JSON.stringify(res));
            this.$message.info(this.i18n["已提醒,请耐心等待"]);
            this.refreshOrderList();
          })
          .catch((err) => {
            console.log("err: " + JSON.stringify(err));
          });
      },
      /**
       * @description 确认收货
       * @param {Object} sn 订单编号
       */
      receiveOrder(sn) {
        this.$util.showModal({
          title: this.i18n["提示"],
          content: this.i18n["您是否确认收到货物?"],
          success: (res) => {
            if (res.confirm) {
              this.$api
                .post(global.apiUrls.postConfirmOrder, {
                  order_sn: sn
                })
                .then((res) => {
                  console.log("res: " + JSON.stringify(res));
                  this.refreshOrderList();
                })
                .catch((err) => {
                  console.log("err: " + JSON.stringify(err));
                });
            }

          },
        });
      },

      /**
       * @description 查看订单详情
       * @param {type} item  order_sn:订单编号    status:支付类型   order_type:订单类型
       */
      navToOrderDetail(item) {
        this.$urouter.navigateTo({
          url: '/pages/integral/integralgoods/integral-order-detail/index',
          params: {
            order_sn: item.order_sn,
            status: item.status,
            order_type: item.order_type,
          },
        });

      },
      /**
       * @description  去评价
       * @param {Object} order_sn :订单编号
       * @param {Object} order_type :订单类型
       *
       */
      evaluateOrder(order_sn, order_type, item) {
        console.log(order_sn, order_type, item)
        uni.setStorageSync('order_goods_list', JSON.stringify(item));
        this.$urouter.navigateTo({
          url: "/pages/order/evaluation/order-evaluation/index",
          params: {
            order_sn: order_sn,
            order_type: order_type
          },
        });
      },
      /**
       * @description  重置列表
       * @param {Object} value 页面是否初始化
       */
      refreshOrderList(value) {
        this.page = 1;
        this.status = "more";
        if (value) {
          this.getOrderList(true);
        } else {
          this.getOrderList();
        }

      },
    },
  };
</script>

<style lang="scss" scoped>
  .page {
    min-height: 100vh;
  }
  .font-24{
    font-size: 24rpx !important;
  }

  // 导航栏 start
  .navbar {
    display: flex;
    width: 100%;
    height: 40px;
    padding: 0 5px;
    background: #ffffff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
    position: sticky;
    z-index: 99;
    top: 0;

    .nav-item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 15px;
      color: #333333;
      position: relative;

      &.current {
        color:$theme;

        &:after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 44px;
          height: 0;
          border-bottom: 2px solid$theme;
        }
      }
    }
  }

  // 导航栏 end
  // 订单列表 start
  .order-item {
    display: flex;
    flex-direction: column;
    padding-left: 30upx;
    background: #fff;
    margin: 16upx 16upx 0 16upx;
    border-radius: 16rpx;

    .i-top {
      display: flex;
      align-items: center;
      height: 80upx;
      padding-right: 30upx;
      font-size: 28rpx;
      color: #333333;
      position: relative;

      .time {
        flex: 1;
      }

      .state {
        color:$theme;
      }

      .del-btn {
        padding: 10upx 0 10upx 36upx;
        font-size: 24rpx;
        color: #f8f8f8;
        position: relative;

        &:after {
          content: "";
          width: 0;
          height: 30upx;
          border-left: 1px #cccccc;
          position: absolute;
          left: 20upx;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }

    //  多条商品 start
    .goods-box {
      height: 160upx;
      padding: 20upx 0;
      white-space: nowrap;

      .goods-item {
        width: 120upx;
        height: 120upx;
        display: inline-block;
        margin-right: 24upx;
      }

      .goods-img {
        display: block;
        width: 100%;
        height: 100%;
        background-color: #eeeeee;
      }
    }

    //  多条商品 end
    //  单条商品 start
    .goods-box-single {
      display: flex;
      padding: 20upx 0;

      .goods-img {
        display: block;
        width: 150upx;
        height: 150upx;
        background-color: #eeeeee;
      }

      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;

        .attr-box {
          font-size: 24rpx;
          color: #f8f8f8;
          padding: 10upx 12upx;
        }
      }
    }

    //  单条商品 end
    // 价格+积分合计  start
    .price-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20upx 30upx 20upx 0;
      font-size: 24rpx;
      color: #333333;

      .num {
        margin: 0 8upx;
        color: #333333;
      }

      .price {
        font-size: 40rpx;
        color: #333333;

        &:before {
          content: "￥";
          font-size: 24rpx;
          margin: 0 2upx 0 8upx;
        }
      }
    }

    // 价格+积分合计  end
    //按钮状态  start
    .action-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 100upx;
      position: relative;
      padding-right: 30rpx;

      .action {
        width: 130rpx;
        height: 50rpx;
        font-size: 24rpx;
        border-radius: 50rpx;
        line-height: 50rpx;
        padding: 0;
        color: #666666;
        background-color: #ffffff;
        border: 1rpx solid #666666;
        margin-left: 20rpx;
      }

      .action:last-child {
        background: $bgtheme;
        color: #ffffff;
        border: none;
      }

      .have_click {
        background-color: #BFBFBF !important;
      }

      .action+.action {
        margin-left: 20rpx;
      }
    }

    //按钮状态  end
  }

  // 订单列表 end
</style>
